<template>
   <div>
       <div class="top">
 <div class="left" @click="Back"><img src="../../../public/Icon/返回.png" alt="">
  
</div>

<!--顶部右边 -->
 <div class="right">
  <div class="text">
   门店详情
  </div>
  <div class="add" @click="add">增加地址</div>
</div>
</div>

<div class="bot"  >
  <div>
    <div>{{lists.storeName}}
</div><van-icon name="service-o" /></div>
 <div>  
   <div> 营业时间:</div>
      <div> 周一至周五:{{lists.saturday}}
        <br>周六：{{lists.sunday}}
        <br>周日：{{lists.weekday}}</div>
 </div>
   <div>门店地址:{{lists.address}}</div>
  
</div>
<div class="map">
<Map class="map"></Map>
</div>
   </div>
</template>

<script setup>
import Map from './map.vue'
import {useRouter,useRoute} from 'vue-router'
import { onMounted,ref ,reactive} from 'vue';
let lists=reactive({})
const router=useRouter()
const route = useRoute()
lists= JSON.parse(route.query.items)

console.log(lists);
const Back=()=>{
   router.push('./shop')
}
const add=()=>{
   router.push('./address')
}
</script>

<style lang="scss" scoped>
.top{
   width: 100%;
   background-color: white;
   height: 50px;
   display: flex;
  justify-content: space-between;
   .left{
       width:25px;
       height: 25px;
       margin: 10px;
       img{
           width: 25px;
           height: 25px;
       }

   }
   .right{
      width: 300px;
      height: 50px;
      line-height: 50px;
      display: flex;
   
    .text{
       width: 230px;
      height: 50px;
      line-height: 50px;
       text-align: center;
    }
    .add{
      width: 70px;
      font-size: 14px;
      color: rgb(49, 104, 223);
    }
  }

}
.bot{
   background-color: white;
   width: 90%;
   height: 150px;
 
   margin: 10px 5%;
:nth-child(1){
   display: flex;
   justify-content: space-between;
   margin: 10px 10px;
   font-size: 20px;
   color: rgb(26, 179, 214);
}
:nth-child(2){
   margin: 3px 5px;
   display: flex;
   :nth-child(1){
   font-size: 14px;
}
:nth-child(2){
   font-size: 14px;
}
}
:nth-child(3){
   margin: 3px 8px;
   font-size: 14px;
}
}
.map{
   background-color: white;
   width: 100%;
   height: 150px;

}
</style>